<template>
  <div class="outbound-detail">
    <!-- 顶部按钮组 -->
    <div class="top-actions">
      <div class="left-actions">
        <el-button plain @click="goBack">
          <el-icon><ArrowLeft /></el-icon>返回
        </el-button>
        <el-button plain>基础档案</el-button>
        <el-button plain>导入</el-button>
        <el-button plain>查看日志</el-button>
      </div>
      <div class="right-actions">
        <el-button plain>设计</el-button>
      </div>
    </div>

    <!-- 标题 -->
    <div class="page-title">
      <h2>{{ formData.subject ? '出库确认 - ' + formData.subject : '出库确认' }}</h2>
    </div>

    <!-- 基本信息 -->
    <div class="info-section">
      <div class="section-header">
        <h3>基本信息</h3>
      </div>
      <div class="info-content">
        <el-form :model="formData" label-position="left" class="info-form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="单据主题:" required>
                <span class="form-text">{{ formData.subject }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出库类别:">
                <span class="form-text">{{ formData.outboundType }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出库库管:" required>
                <span class="form-text">{{ formData.warehouseManager }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="出库申请单:">
                <span class="form-text">{{ formData.outboundApplication }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="关联项目:">
                <span class="form-text">{{ formData.relatedProject }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="关联单位名称:">
                <span class="form-text">{{ formData.relatedUnit }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="确认时间:">
                <span class="form-text">{{ formData.confirmTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="16"></el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <!-- 收货地址 -->
    <div class="address-section">
      <div class="section-header">
        <h3>收货地址</h3>
      </div>
      <div class="address-content">
        <el-form :model="addressData" label-position="left" class="address-form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="收货人:">
                <span class="form-text">{{ addressData.receiver }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="固定电话:">
                <span class="form-text">{{ addressData.telephone }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号码:">
                <span class="form-text">{{ addressData.mobile }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="所在省份:">
                <span class="form-text">{{ addressData.province }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="所在地区:">
                <span class="form-text">{{ addressData.district }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="详细地址:">
                <span class="form-text">{{ addressData.detailAddress }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <!-- 产品明细 -->
    <div class="product-section">
      <div class="section-header">
        <div class="header-content">
          <h3>产品明细</h3>
          <el-button plain>导出</el-button>
        </div>
      </div>
      <div class="product-content">
        <el-table
          :data="productList"
          border
          stripe
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa' }"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="name" label="产品名称" min-width="200" align="left">
            <template #header>
              <span class="required-label">产品名称</span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="产品编号" width="120" align="center" />
          <el-table-column prop="model" label="规格型号" width="120" align="center" />
          <el-table-column prop="unit" label="单位" width="80" align="center" />
          <el-table-column prop="quantity" label="确认出库数量" width="120" align="center">
            <template #header>
              <span class="required-label">确认出库数量</span>
            </template>
          </el-table-column>
          <el-table-column prop="warehouse" label="库存信息" width="200" align="center" />
          <el-table-column prop="outboundWarehouse" label="出库仓库" width="120" align="center">
            <template #header>
              <span class="required-label">出库仓库</span>
            </template>
          </el-table-column>
          <el-table-column prop="dueDate" label="到期日期" width="120" align="center" />
          <el-table-column prop="packageType" label="包装方式" width="120" align="center" />
          <el-table-column prop="remark" label="备注" min-width="150" align="center" />
        </el-table>
      </div>
      <div class="table-summary">
        <span>确认出库数量：{{ totalQuantity }}</span>
      </div>
    </div>

    <!-- 附件上传 -->
    <div class="attachment-section">
      <div class="section-header">
        <h3>附件上传</h3>
      </div>
      <div class="attachment-content">
        <el-table
          :data="attachmentList"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa' }"
        >
          <el-table-column prop="fileName" label="文件名称" min-width="200" />
          <el-table-column prop="fileSize" label="文件大小" width="120" />
          <el-table-column prop="uploader" label="上传人" width="120" />
          <el-table-column prop="uploadTime" label="上传时间" width="180" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'

// 定义产品项的接口
interface ProductItem {
  name: string
  code: string
  model: string
  unit: string
  quantity: string
  warehouse: string
  outboundWarehouse: string
  dueDate: string
  packageType: string
  remark: string
}

const route = useRoute()
const router = useRouter()

// 返回上一页
const goBack = () => {
  router.push('/warehouse/outbound-confirmation')
}

// 表单数据
const formData = ref({
  subject: '',
  outboundType: '',
  warehouseManager: '',
  relatedProject: '',
  relatedUnit: '',
  confirmTime: '',
  outboundApplication: '' // 新增出库申请单字段
})

// 收货地址数据
const addressData = ref({
  receiver: '',
  telephone: '',
  mobile: '',
  province: '',
  district: '',
  detailAddress: ''
})

// 产品列表数据
const productList = ref<ProductItem[]>([])

// 附件列表
const attachmentList = ref([])

// 从URL获取参数并加载数据
const loadDataFromUrl = () => {
  const id = route.query.id
  const params = {
    confirmSubject: route.query.confirmSubject as string,    // 出库确认主题
    outboundApplication: route.query.outboundApplication as string,  // 出库申请单
    outboundType: route.query.outboundType as string,        // 出库类型
    relatedProject: route.query.relatedProject as string,    // 关联项目
    warehouseManager: route.query.warehouseManager as string,// 出库库管
    confirmTime: route.query.confirmTime as string,          // 出库确认时间
    quantity: route.query.quantity as string                 // 确认出库数量
  }

  // 更新表单数据
  formData.value = {
    ...formData.value,
    // 出库确认主题作为单据主题
    subject: params.confirmSubject || '',
    // 出库类型
    outboundType: params.outboundType || '',
    // 关联项目
    relatedProject: params.relatedProject || '',
    // 出库库管
    warehouseManager: params.warehouseManager || '',
    // 出库确认时间
    confirmTime: params.confirmTime || '',
    // 出库申请单（如果需要显示，需要在模板中添加相应字段）
    outboundApplication: params.outboundApplication || ''
  }

  // 如果有确认出库数量，创建一个基础的产品列表项
  if (params.quantity) {
    productList.value = [{
      name: '',
      code: '',
      model: '',
      unit: '',
      quantity: params.quantity,
      warehouse: '',
      outboundWarehouse: '',
      dueDate: '',
      packageType: '',
      remark: ''
    }]
  }

  // 如果有ID且不是新建，则加载完整数据
  if (id && id !== 'new') {
    loadOutboundData(id as string)
  }
}

// 加载出库单数据
const loadOutboundData = async (id: string) => {
  try {
    // 这里替换为实际的API调用
    // const response = await fetch(`/api/outbound/${id}`)
    // const data = await response.json()
    
    // 模拟数据加载
    setTimeout(() => {
      // 保存URL传入的参数
      const currentData = {
        subject: formData.value.subject,
        outboundType: formData.value.outboundType,
        warehouseManager: formData.value.warehouseManager,
        relatedProject: formData.value.relatedProject,
        confirmTime: formData.value.confirmTime,
        outboundApplication: formData.value.outboundApplication
      }
      
      // 模拟数据
      formData.value = {
        // 保留URL传入的参数值，如果没有则使用模拟数据
        subject: currentData.subject || '制造生产原料：聚苯乙、聚护生产门窗 数控器材料',
        outboundType: currentData.outboundType || '领料出库',
        warehouseManager: currentData.warehouseManager || '张明',
        relatedProject: currentData.relatedProject || '项目A',
        relatedUnit: '供应商B',
        confirmTime: currentData.confirmTime || '2023-04-01 14:34:16',
        outboundApplication: currentData.outboundApplication || ''
      }

      addressData.value = {
        receiver: '李四',
        telephone: '010-12345678',
        mobile: '13900139000',
        province: '北京市',
        district: '海淀区',
        detailAddress: '科技园路100号'
      }

      productList.value = [{
        name: 'SCR440碳钢螺合金螺钉粉',
        code: '060004',
        model: '20#',
        unit: '瓶',
        quantity: '3.20',
        warehouse: '汽车行业原材料库 11.00',
        outboundWarehouse: '汽车行业原材料库',
        dueDate: '2021-05-05',
        packageType: '',
        remark: ''
      }]
    }, 100)
  } catch (error) {
    console.error('加载出库单数据失败:', error)
  }
}

// 计算总数量
const totalQuantity = computed(() => {
  return productList.value.reduce((sum, item: ProductItem) => {
    return sum + Number(item.quantity)
  }, 0).toFixed(2)
})

// 页面加载时执行
onMounted(() => {
  loadDataFromUrl()
})
</script>

<style scoped>
.outbound-detail {
  padding: 20px;
  background-color: #fff;
}

.top-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.left-actions {
  display: flex;
  gap: 10px;
}

.page-title {
  margin: 20px 0;
}

.page-title h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.section-header {
  background-color: #f5f7fa;
  padding: 12px 20px;
  border: 1px solid #e4e7ed;
  border-bottom: none;
}

.section-header h3 {
  font-size: 16px;
  margin: 0;
  font-weight: normal;
}

.info-content,
.address-content,
.product-content,
.attachment-content {
  border: 1px solid #e4e7ed;
  padding: 20px;
}

.info-form,
.address-form {
  :deep(.el-form-item__label) {
    color: #606266;
  }
}

.form-text {
  color: #333;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h3 {
  font-size: 16px;
  margin: 0;
  font-weight: normal;
}

.required-label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}

.table-summary {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #e4e7ed;
  background-color: #f5f7fa;
}

.info-section,
.address-section,
.product-section,
.attachment-section {
  margin-bottom: 20px;
}

:deep(.el-table) {
  --el-table-border-color: #e4e7ed;
  --el-table-header-bg-color: #f5f7fa;
}

:deep(.el-form-item) {
  margin-bottom: 18px;
}

:deep(.el-form-item__label) {
  padding-right: 12px;
}

/* 必填项标记 */
.el-form-item.is-required .el-form-item__label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>